import { observer } from "mobx-react";
import { Spin } from 'antd';
import { loadSpread, releaseSpread } from "../../utils/loadSpread";
import TopTools from "../designer/excel/TopTools";
@observer
export default class TemplateViewContent extends React.Component {
    render() {
        const { store } = this.props;
        return (
            <div className="edc-excel-template-view">
                <div className="top">
                    {store.isInit && <TopTools ecId={`${this && this.props && this.props.ecId || ''}_TopTools@mgbx17`}
                        templateVisible={false}
                        fieldVisible={false}
                    />}
                </div>
                <div className="content">
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@fso2bk`} spinning={!store.isInit || store.loading} size="large" wrapperClassName="wea-edc-excel-spin">
                        <div className="edc-workbook">
                            <div className="edc-workbook-head" >
                                <div className="cell-name">{store.activeCellName}</div>
                                <div className="cell-opt"><i className="icon-mode-function" style={{ fontSize: 16, color: '#57c5f7' }} /></div>
                                <input className="formula-text-box ant-input" ref={ref => this.formulaTextBox = ref} />
                            </div>
                            <div style={{ height: 'calc(100% - 34px)' }}>
                                <div className="workbook-container" ref={ref => this.container = ref} style={{ height: '100%' }} />
                            </div>
                        </div>
                    </Spin>
                </div>
            </div>
        )
    }
    componentDidMount() {
        this.t = loadSpread(this.loadWorkbook);
    }
    componentWillUnmount() {
        releaseSpread(this.t);
    }
    loadWorkbook = () => {
        const { store } = this.props;
        if (this.container) {
            const workbook = new GC.Spread.Sheets.Workbook(this.container);
            const fbx = new GC.Spread.Sheets.FormulaTextBox.FormulaTextBox(this.formulaTextBox, {});
            fbx.workbook(workbook);
            store.initWorkbook(workbook);
        }
    }
}